import React from 'react';
import { Card, Typography, Space, Button, Tag, Tooltip } from 'antd';
import {
  EditOutlined,
  DeleteOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
} from '@ant-design/icons';
import dayjs from 'dayjs';

const { Text, Paragraph } = Typography;

function TodoItem({ todo, onEdit, onDelete, onStatusChange, theme }) {
  const handleStatusChange = () => {
    onStatusChange({
      ...todo,
      isCompleted: !todo.isCompleted,
    });
  };

  const isOverdue = !todo.isCompleted && dayjs(todo.deadTime).isBefore(dayjs());

  return (
    <Card
      className="todo-card"
      style={{
        background: theme.colorBgContainer,
        boxShadow: theme.boxShadow,
        backgroundImage: theme.cardGradient,
        borderRadius: '12px',
      }}
      hoverable
      actions={[
        <Tooltip title="编辑">
          <Button
            type="text"
            icon={<EditOutlined />}
            onClick={() => onEdit(todo)}
          />
        </Tooltip>,
        <Tooltip title="删除">
          <Button
            type="text"
            danger
            icon={<DeleteOutlined />}
            onClick={() => onDelete(todo.id)}
          />
        </Tooltip>,
        <Tooltip title={todo.isCompleted ? "标记为未完成" : "标记为已完成"}>
          <Button
            type="text"
            icon={<CheckCircleOutlined />}
            style={{ 
              color: todo.isCompleted ? '#10B981' : undefined,
              transition: 'all 0.3s ease'
            }}
            onClick={handleStatusChange}
          />
        </Tooltip>,
      ]}
    >
      <Space direction="vertical" style={{ width: '100%' }}>
        <Space wrap align="center">
          {todo.isCompleted && (
            <Tag className="todo-tag" color="success">已完成</Tag>
          )}
          {isOverdue && (
            <Tag className="todo-tag" color="error">已逾期</Tag>
          )}
          <Text
            style={{
              fontSize: '16px',
              fontWeight: 500,
              textDecoration: todo.isCompleted ? 'line-through' : 'none',
              color: theme.colorText,
              opacity: todo.isCompleted ? 0.6 : 1,
            }}
          >
            {todo.name}
          </Text>
        </Space>
        <Paragraph
          ellipsis={{ rows: 2 }}
          style={{
            color: theme.colorText,
            opacity: 0.8,
            margin: 0,
            fontSize: '14px',
          }}
        >
          {todo.content}
        </Paragraph>
        <Space>
          <ClockCircleOutlined style={{ opacity: 0.5 }} />
          <Text 
            type="secondary"
            style={{
              fontSize: '13px',
              opacity: 0.8,
            }}
          >
            截止日期: {dayjs(todo.deadTime).format('YYYY-MM-DD HH:mm')}
          </Text>
        </Space>
      </Space>
    </Card>
  );
}

export default TodoItem; 